<template>
  <div class="box color-white" :class="{ 'adjust-last-row': cardList.length % 4 !== 0 }">
    <div
      @click="toPage(item.url)"
      class="list"
      v-for="(item, index) in cardList"
      :key="index"
    >
      <div class="d-flex list-top">
        <div class="image-box">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="font-w font-32 title-box">{{ item.title }}</div>
      </div>
      <div class="fonts-18">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      cardList: [
        {
          title: "语音转文字",
          imgUrl: require("../../assets/intelligence/语音转文字.png"),
          content: "功能介绍：暂无",
          url: "/record",
        },
        {
          title: "文摘智阅",
          imgUrl: require("../../assets/intelligence/组1445.png"),
          content: "功能介绍：暂无",
          url: "/abstract",
        },
        {
          title: "公文拟呈",
          imgUrl: require("../../assets/intelligence/组1448.png"),
          content: "功能介绍：暂无",
          url: "/requestInst",
        },
        {
          title: "基建智管",
          imgUrl: require("../../assets/intelligence/组1446.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "会务智办",
          imgUrl: require("../../assets/intelligence/组1447.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "专家智选",
          imgUrl: require("../../assets/intelligence/组1449.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "知识智荟",
          imgUrl: require("../../assets/intelligence/组1450.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "事务提醒",
          imgUrl: require("../../assets/intelligence/组1451.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "统计分析策略",
          imgUrl: require("../../assets/intelligence/组1452.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "个人智能档案",
          imgUrl: require("../../assets/intelligence/组1453.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "辅能智趣",
          imgUrl: require("../../assets/intelligence/组1454.png"),
          content: "功能介绍：暂无",
        },
        {
          title: "",
          imgUrl: "",
          content: "",
        },
      ],
    };
  },
  methods: {
    // 跳转各个卡片页面
    toPage(url) {
      if (url) {
        this.$router.push({
          path: `${url}`,
        });
      } else {
        this.$message.error("该功能正在开发中，敬请期待！");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  background-color: #020c14;
  padding: 56px 66px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 100vh; // 设置最小高度为屏幕高度
  justify-content: space-between;

  &.adjust-last-row {
    justify-content: flex-start;
  }

  .list {
    width: 364px;
    height: 248px;
    // width: 24.3%;
    margin-right: 40px;
    // margin-left: 10px;
    margin-bottom: 46px;
    // margin-top: 20px;
    padding: 16px;
    border-radius: 5px;
    background-image: url(../../assets/intelligence/圆角背景.png);
    background-size: 100% 100%;
    background-position: center;
    border: 1px dashed transparent;
    cursor: pointer;
  }
  .list:hover {
    border: 1px dashed #fff;
    opacity: 1;
  }

  .list-top {
    margin-bottom: 19px;
  }
  .image-box {
    width: 94px;
    height: 94px;
    margin-right: 29px;
  }
  .title-box {
    width: 192px;
  }

  .list:last-child {
    visibility: hidden;
  }
}
</style>
